[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'TOON Converter', description: 'Convert JSON to TOON format - compact, human-readable serialization', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/file-uploader.tsx" isMerged="true" 'use client' import { useRef, useState } from 'react' import { Upload } from 'lucide-react' interface FileUploaderProps { onFileUpload: (file: File, content: string) => void } export default function FileUploader({ onFileUpload }: FileUploaderProps) { const [isDragActive, setIsDragActive] = useState(false) const inputRef = useRef(null) const handleFile = (file: File) => { if (file.type === 'application/json' || file.name.endsWith('.json')) { const reader = new FileReader() reader.onload = (e) => { const content = e.target?.result as string onFileUpload(file, content) } reader.readAsText(file) } else { alert('Please upload a JSON file') } } const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(e.type === 'dragenter' || e.type === 'dragover') } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(false) if (e.dataTransfer.files?.[0]) { handleFile(e.dataTransfer.files[0]) } } const handleChange = (e: React.ChangeEvent) => { if (e.target.files?.[0]) { handleFile(e.target.files[0]) } } return (

Drag and drop your JSON file here

) } [V0_FILE]typescriptreact:file="components/token-stats.tsx" isMerged="true" 'use client' interface TokenStatsProps { jsonTokens: number toonTokens: number fileName: string } export default function TokenStats({ jsonTokens, toonTokens, fileName }: TokenStatsProps) { const savings = Math.round(((jsonTokens - toonTokens) / jsonTokens) * 100) return (

File Name

{fileName}

JSON Tokens

{jsonTokens.toLocaleString()}

→

TOON Tokens

{toonTokens.toLocaleString()}

Token Savings

≈{savings}%

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/control-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { Download } from 'lucide-react' interface ControlPanelProps { jsonContent: string toonContent: string } export default function ControlPanel({ jsonContent, toonContent }: ControlPanelProps) { const downloadFile = (content: string, filename: string) => { const element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content)) element.setAttribute('download', filename) element.style.display = 'none' document.body.appendChild(element) element.click() document.body.removeChild(element) } return (

{/* JSON Download */} {/* TOON Download */}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.05 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.10 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.10 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.05 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.35 0 0); --muted-foreground: oklch(0.70 0 0); --accent: oklch(0.95 0 0); --accent-foreground: oklch(0.05 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.20 0 0); --input: oklch(0.15 0 0); --ring: oklch(0.40 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.95 0 0); --sidebar-primary-foreground: oklch(0.05 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.20 0 0); --sidebar-ring: oklch(0.40 0 0); } .dark { --background: oklch(0.05 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.10 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.10 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.05 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.35 0 0); --muted-foreground: oklch(0.70 0 0); --accent: oklch(0.95 0 0); --accent-foreground: oklch(0.05 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.20 0 0); --input: oklch(0.15 0 0); --ring: oklch(0.40 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.95 0 0); --sidebar-primary-foreground: oklch(0.05 0 0); --sidebar-accent: oklch(0.25 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.20 0 0); --sidebar-ring: oklch(0.40 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Custom scrollbar styling for code editors */ textarea::-webkit-scrollbar, .scrollbar-custom::-webkit-scrollbar { width: 8px; height: 8px; } textarea::-webkit-scrollbar-track, .scrollbar-custom::-webkit-scrollbar-track { background: oklch(0.05 0 0); } textarea::-webkit-scrollbar-thumb, .scrollbar-custom::-webkit-scrollbar-thumb { background: oklch(0.35 0 0); border-radius: 4px; } textarea::-webkit-scrollbar-thumb:hover, .scrollbar-custom::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0 0); } } [V0_FILE]typescriptreact:file="components/editor-panes.tsx" isEdit="true" isMerged="true" 'use client' import { useRef, useState } from 'react' import { Copy, Upload, Wand2, Download } from 'lucide-react' interface EditorPanesProps { inputText: string inputFormat: 'json' | 'yaml' | 'csv' toonOutput: string onInputChange: (text: string) => void onFormatChange: (format: 'json' | 'yaml' | 'csv') => void onCopyInput: () => void onCopyToon: () => void onBeautify: () => void copiedType: 'input' | 'toon' | null } export default function EditorPanes({ inputText, inputFormat, toonOutput, onInputChange, onFormatChange, onCopyInput, onCopyToon, onBeautify, copiedType }: EditorPanesProps) { const [isDragActive, setIsDragActive] = useState(false) const inputRef = useRef(null) const downloadFile = (content: string, filename: string) => { const element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content)) element.setAttribute('download', filename) element.style.display = 'none' document.body.appendChild(element) element.click() document.body.removeChild(element) } const handleFile = (file: File) => { const reader = new FileReader() reader.onload = (e) => { const content = e.target?.result as string onInputChange(content) if (file.name.endsWith('.json')) { onFormatChange('json') } else if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) { onFormatChange('yaml') } else if (file.name.endsWith('.csv')) { onFormatChange('csv') } } reader.readAsText(file) } const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(e.type === 'dragenter' || e.type === 'dragover') } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragActive(false) if (e.dataTransfer.files?.[0]) { handleFile(e.dataTransfer.files[0]) } } const handleChange = (e: React.ChangeEvent) => { if (e.target.files?.[0]) { handleFile(e.target.files[0]) } } return (

{/* Input Editor */}

Input

onInputChange(e.target.value)}
            placeholder={`Paste your ${inputFormat.toUpperCase()} here or drag and drop a file...`}
            className="flex-1 font-mono text-sm p-4 pr-3 bg-input border-0 rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none overflow-auto"
          />
          
          {isDragActive && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/30 rounded-lg pointer-events-none">
              <div className="flex flex-col items-center gap-2">
                <Upload size={32} className="text-foreground" />
                <p className="text-foreground font-semibold">Drop file here</p>
              </div>
            </div>
          )}
        </div>
        
        <input
          ref={inputRef}
          type="file"
          accept=".json,.yaml,.yml,.csv"
          onChange={handleChange}
          className="hidden"
        />
      </div>

{/* TOON Output */}
      <div className="flex flex-col gap-2 min-h-0">
        <div className="flex items-center justify-between flex-shrink-0">
          <label className="text-sm font-semibold text-muted-foreground">TOON Format</label>
          <div className="flex items-center gap-1">
            <button
              onClick={onCopyToon}
              title={copiedType === 'toon' ? 'Copied!' : 'Copy TOON'}
              className="p-1.5 text-muted-foreground hover:text-foreground transition-colors"
            >
              <Copy size={16} />
            </button>
            <button
              onClick={() => downloadFile(toonOutput, 'data.toon')}
              title="Download TOON"
              className="p-1.5 text-muted-foreground hover:text-foreground transition-colors"
            >
              <Download size={16} />
            </button>
          </div>
        </div>
        <div className="flex-1 min-h-0 font-mono text-sm p-4 pr-3 bg-input border border-border rounded-lg text-foreground break-all overflow-auto whitespace-pre-wrap scrollbar-custom">
          {toonOutput || 'Output will appear here...'}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
'use client'

import { useState } from 'react'
import EditorPanes from '@/components/editor-panes'

type Format = 'json' | 'yaml' | 'csv'

export default function Home() {
  const [inputText, setInputText] = useState('')
  const [inputFormat, setInputFormat] = useState<Format>('json')
  const [toonOutput, setToonOutput] = useState('')
  const [fileName, setFileName] = useState('data.json')
  const [copied, setCopied] = useState<'input' | 'toon' | null>(null)

const parseCSV = (csvStr: string): any => {
    const lines = csvStr.trim().split('\n')
    if (lines.length < 2) return []
    
    const parseLine = (line: string): string[] => {
      const result: string[] = []
      let current = ''
      let inQuotes = false
      
      for (let i = 0; i < line.length; i++) {
        const char = line[i]
        
        if (char === '"') {
          inQuotes = !inQuotes
        } else if (char === ',' && !inQuotes) {
          result.push(current.trim())
          current = ''
        } else {
          current += char
        }
      }
      result.push(current.trim())
      return result
    }
    
    const headers = parseLine(lines[0])
    const data = lines.slice(1).map(line => {
      const values = parseLine(line)
      const obj: any = {}
      headers.forEach((header, i) => {
        const value = values[i] || ''
        // Try to convert to number or boolean
        if (value === 'true') obj[header] = true
        else if (value === 'false') obj[header] = false
        else if (!isNaN(Number(value)) && value !== '') obj[header] = Number(value)
        else obj[header] = value
      })
      return obj
    })
    
    return { data }
  }

const parseYAML = (yamlStr: string): any => {
    try {
      const lines = yamlStr.trim().split('\n')
      const result: any = {}
      let currentKey = ''
      let currentArray: any[] = []
      let currentObject: any = {}
      
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i]
        const trimmed = line.trim()
        
        // Skip empty lines
        if (!trimmed) continue
        
        // Array item
        if (trimmed.startsWith('- ')) {
          // Save previous object if exists
          if (Object.keys(currentObject).length > 0) {
            currentArray.push(currentObject)
            currentObject = {}
          }
          
          // Parse inline object: - key: value
          const inlineMatch = trimmed.match(/^- (\w+): (.+)$/)
          if (inlineMatch) {
            currentObject = { [inlineMatch[1]]: parseValue(inlineMatch[2]) }
            continue
          }
        }
        
        // Regular key-value pair
        const match = line.match(/^(\s*)(\w+):\s*(.*)$/)
        if (match) {
          const indent = match[1].length
          const key = match[2]
          const value = match[3]
          
          // Root level key
          if (indent === 0) {
            // Save previous array
            if (currentKey && currentArray.length > 0) {
              if (Object.keys(currentObject).length > 0) {
                currentArray.push(currentObject)
                currentObject = {}
              }
              result[currentKey] = currentArray
              currentArray = []
            }
            
            if (value) {
              result[key] = parseValue(value)
            } else {
              currentKey = key
            }
          } 
          // Nested key (part of array item)
          else if (indent > 0 && currentKey) {
            currentObject[key] = parseValue(value)
          }
        }
      }
      
      // Save last array
      if (currentKey && currentArray.length > 0) {
        if (Object.keys(currentObject).length > 0) {
          currentArray.push(currentObject)
        }
        result[currentKey] = currentArray
      }
      
      return result
    } catch (e) {
      console.error('[v0] YAML parsing error:', e)
      return {}
    }
  }

const parseValue = (value: string): any => {
    const trimmed = value.trim()
    if (trimmed === 'true') return true
    if (trimmed === 'false') return false
    if (trimmed === 'null') return null
    if (!isNaN(Number(trimmed)) && trimmed !== '') return Number(trimmed)
    return trimmed
  }

const convertToToon = (input: string, format: Format): string => {
    try {
      let data: any
      
      if (format === 'json') {
        data = JSON.parse(input)
      } else if (format === 'csv') {
        const parsed = parseCSV(input)
        data = parsed.data
      } else if (format === 'yaml') {
        data = parseYAML(input)
      }
      
      const processValue = (val: any): string => {
        if (val === null) return 'null'
        if (val === undefined) return 'undefined'
        if (typeof val === 'boolean') return val.toString()
        if (typeof val === 'number') return val.toString()
        if (typeof val === 'string') return val
        if (Array.isArray(val)) {
          if (val.length === 0) return '[]'
          // Array of objects - use TOON format
          if (typeof val[0] === 'object' && val[0] !== null && !Array.isArray(val[0])) {
            const keys = Object.keys(val[0])
            const values = val.map(item => 
              keys.map(k => processValue(item[k])).join(',')
            ).join('\n')
            return `[${val.length}]{${keys.join(',')}}:\n${values}`
          }
          // Array of primitives
          return `[${val.map(processValue).join(',')}]`
        }
        if (typeof val === 'object') {
          return `{${Object.entries(val).map(([k, v]) => `${k}:${processValue(v)}`).join(',')}}`
        }
        return String(val)
      }

// Handle root object with array properties
      if (typeof data === 'object' && !Array.isArray(data)) {
        const entries = Object.entries(data)
        const result = entries.map(([key, value]) => {
          if (Array.isArray(value) && value.length > 0 && typeof value[0] === 'object') {
            const keys = Object.keys(value[0])
            const values = value.map((item: any) => 
              keys.map(k => processValue(item[k])).join(',')
            ).join('\n')
            return `${key}[${value.length}]{${keys.join(',')}}:\n${values}`
          }
          return `${key}:${processValue(value)}`
        }).join('\n\n')
        return result
      }

// Handle root array
      if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'object') {
        const keys = Object.keys(data[0])
        const values = data.map((item: any) => 
          keys.map(k => processValue(item[k])).join(',')
        ).join('\n')
        return `data[${data.length}]{${keys.join(',')}}:\n${values}`
      }

return processValue(data)
    } catch (error) {
      console.error('[v0] Conversion error:', error)
      return `Error: Invalid ${format.toUpperCase()}`
    }
  }

const beautifyInput = (input: string, format: Format): string => {
    try {
      if (format === 'json') {
        const parsed = JSON.parse(input)
        return JSON.stringify(parsed, null, 2)
      }
      return input
    } catch {
      return input
    }
  }

const beautifyToon = (toonStr: string): string => {
    return toonStr
      .split('\n\n')
      .map(block => block.trim())
      .join('\n\n')
  }

const handleTextChange = (text: string) => {
    setInputText(text)
    const toon = convertToToon(text, inputFormat)
    setToonOutput(toon)
  }

const handleFormatChange = (format: Format) => {
    setInputFormat(format)
    if (inputText) {
      const toon = convertToToon(inputText, format)
      setToonOutput(toon)
    }
  }

const handleBeautify = () => {
    const beautified = beautifyInput(inputText, inputFormat)
    setInputText(beautified)
    const toon = convertToToon(beautified, inputFormat)
    const beautifiedToon = beautifyToon(toon)
    setToonOutput(beautifiedToon)
  }

const copyToClipboard = (text: string, type: 'input' | 'toon') => {
    navigator.clipboard.writeText(text)
    setCopied(type)
    setTimeout(() => setCopied(null), 2000)
  }

return (
    <div className="h-screen flex flex-col bg-background overflow-hidden">
      {/* Header */}
      <header className="border-b border-border flex-shrink-0">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <div className="bg-foreground text-background px-3 py-1.5 font-mono font-bold text-lg">
              TOON
            </div>
            <div className="flex flex-col">
              <h1 className="text-xl font-bold text-foreground">Token-Oriented Object Notation</h1>
              <p className="text-muted-foreground text-xs">Compact format for JSON serialization</p>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="flex-1 container mx-auto px-4 py-4 overflow-hidden">
        <div className="max-w-7xl mx-auto h-full flex flex-col gap-4">
          {/* Editor Section */}
          <div className="flex-1 min-h-0">
            <EditorPanes 
              inputText={inputText}
              inputFormat={inputFormat}
              toonOutput={toonOutput}
              onInputChange={handleTextChange}
              onFormatChange={handleFormatChange}
              onCopyInput={() => copyToClipboard(inputText, 'input')}
              onCopyToon={() => copyToClipboard(toonOutput, 'toon')}
              onBeautify={handleBeautify}
              copiedType={copied}
            />
          </div>
        </div>
      </main>

{/* Footer */}
      <footer className="border-t border-border flex-shrink-0">
        <div className="container mx-auto px-4 py-3">
          <p className="text-center text-muted-foreground text-xs">
            ≈30-60% token savings • Best for repeated structures & tables
          </p>
        </div>
      </footer>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from ponceain

About

Tags

Share

About

Tags

Share

More from ponceain